<template>
  <div class="hello" id="hello">
    <div id="divwelcome" v-show="welcomeshow">
      <h1 v-show="!errortextshow"><b>部领导选票</b></h1>
      <h1 v-show="errortextshow" class="erroricon"></h1>
      <h1 v-show="errortextshow" class="erroricontext"><b>{{tickettype}}</b></h1>
      <div v-if='nextbtnshow' style="color:#E9F3FE;text-align:left;text-indent:2em;padding-bottom:0.5rem">{{welcome}}</div>
      <el-button type="warning" v-if='nextbtnshow' @click="votestart" id="btn_start" style="margin-bottom:1rem">开始投票</el-button>
    </div>
    <votetemp1 :ticketdata="ticketdata" v-show="voteshow" class="ticketback"></votetemp1>
    <div class="btmback" v-show="errortextshow"></div>
  </div>
</template>

<script>
import votetemp1 from '@/components/VoteTemp1.vue'
export default {
  components: {
    votetemp1
  },
  data () {
    return {
      tickettype: '',
      welcome: '',
      nextbtnshow: false,
      welcomeshow: true,
      voteshow: false,
      voteshow2: false,
      ticketdata: {},
      errortextshow: false
    }
  },
  methods: {
    votestart () {
      this.welcomeshow = false
    },
    getTicketDetails (id) {
      var _this = this
      this.$http
        .post(`/api/vote/ticket/` + id)
        .then(function (response) {
          if (response.data.success) {
            _this.nextbtnshow = true
            _this.welcome = response.data.result.welcome
            _this.ticketdata = response.data.result
            _this.voteshow = true
          } else {
            _this.errortextshow = true
            _this.tickettype = response.data.message
          }
        })
        .catch(function (error) {
          console.log('获取失败:' + error)
        })
    }
  },
  mounted () {
    this.getTicketDetails(this.$route.params.id)
  }
}
</script>
<style>
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<style>
#btn_start{
  width: 8rem;
  font-size:0.6rem;
  color:#fff !important;
  font-family: 'Microsoft YaHei','黑体';
  padding:0.3rem 0;
  margin: 0 1rem;
  text-align: center;
  display: block;
}
  .hello{
    width: 10rem;
  }
#divwelcome{
  color:#fff;
  font-family: 'Microsoft YaHei','黑体';
  width:25rem;
  height: 5rem;
  font-size:0.8rem;
  margin:2rem auto 0;
  width: 10rem;
}
#divwelcome .erroricon{
  width:10rem;
  height: 4rem;
  background:url(../assets/icon_error.png) no-repeat center top;
  background-size:contain;
}
#divwelcome .erroricontext{
  width:10rem;
  font-size:0.8rem;
}
#divwelcome div{
  font-size:0.5rem;
  padding:0.5rem;
  line-height: 200%;
}
#divwelcome h1{
  font-size:0.8rem;
  margin-bottom:0;
  text-align: center;
}
</style>
